<template>
  <div class="uploadbox">
                   <el-upload
                   v-model:file-list="fileList"
                   class="upload-demo"
                   :on-change="handleChange"
                   :auto-upload="false"
                   >
                   <el-button type="primary" style="width: 40%;margin-left: 3%;">选择</el-button>
                   <template #tip>
                   <el-button type="primary"  style="width: 40%;margin-left: 3%;" @click="handleUpload" :disabled="fileList.length === 0">上传</el-button>
                   <div class="el-upload__tip">
                   支持.doc.docx.pdf.png等类型,大小不超过10MB
                   </div>
                   </template>
                   </el-upload>
                   </div>
</template>

<script setup>
import { ref,defineEmits } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import tool from '../utils/oss.js'
  
  const fileList = ref([]);
  const emit = defineEmits(['updateFilename']); // 定义自定义事件
  
  const handleChange = (uploadFile, uploadFiles) => {
  fileList.value = uploadFiles;
  };
  
  const handleUpload = async () => {
    let uploadResults = []; // 用于存储所有上传结果
  for (const file of fileList.value) {
    try {
      const res = await tool.oss.upload(file.raw);
      console.log(res);
      uploadResults.push(res.filename); // 收集所有文件名
    } catch (error) {
      console.error(error);
    }
  }
  ElMessage.success('上传成功');
  emit('updateFilename', uploadResults);// 一次性传递所有文件名
  fileList.value = []; // 清空文件列表

  };
</script>

<style>

.uploadbox{
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

</style>